<template>
  <div class="mod-user">
    <el-button plain @click="WithdrawalRecord">物业账套</el-button>
    <el-button plain disabled>到家账套</el-button>
    <el-form :inline="true" @keyup.enter.native="getDataList()">
      <div class="seacrhMoney">
        <el-form-item>
          <div class="balance-searchMoney">
            法人公司账套编码
            <el-input class="input" v-model="legalAccountCode" placeholder="请输入法人公司账套编码"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="balance-searchMoney">
            法人公司名称
            <el-input class="input" v-model="legalCompanyName" placeholder="请输入法人公司名称"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="balance-searchMoney">
            状态
            <el-select v-model="isEnable" filterable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="demand">查询</el-button>
        <el-button type="primary" @click="empty">清空</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <div style="
        background-color: #fff;
        margin-top: 16px;
        border-radius: 6px;
        padding: 16px;
      ">
      <div style="
          display: flex;
          justify-content: flex-end;
          margin-bottom: 10px;
          box-sizing: border-box;
        ">
        <el-button type="primary" size="medium" @click="addgetDataList">新增银行账号</el-button>
      </div>

      <el-table :data="dataList" v-loading="dataListLoading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" element-loading-custom-class="loading_color" style="width: 100%;">
        <template slot="empty">
          <img class="machine" src="../../assets/img/machine.svg" alt="" />
          <div style="font-size: 14px; text-align: center">暂无数据</div>
        </template>
        <el-table-column prop="legalAccountCode" header-align="center" align="center" label="法人公司账套编码">
        </el-table-column>
        <el-table-column prop="legalCompanyName" header-align="center" align="center" label="法人公司名称">
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="状态">
          <template slot-scope="scope">
            <div v-if="(scope.row.isEnable == 1)">有效</div>
            <div v-if="(scope.row.isEnable == 0)">无效</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="(scope.row.isEnable == 1)" type="text" size="small" :data-id="scope.row.id" @click="addOrUpdateHandle(scope.row)">查看详情</el-button>
            <el-button v-if="(scope.row.isEnable == 1)" type="text" size="small" :data-id="scope.row.id" @click="open(scope.row)">停用</el-button>
            <el-button v-if="(scope.row.isEnable == 0)" type="text" size="small" :data-id="scope.row.id" @click="open(scope.row)">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <!-- 新增银行账号dialog -->
    <el-dialog title="新增银行账号" @close='closeDialog' :visible.sync="dialogVisible" width="30%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
        <el-form-item label="法人公司账套编码" prop="legalAccountCode">
          <el-input v-model="ruleForm.legalAccountCode"></el-input>
        </el-form-item>
        <el-form-item label="法人公司名称" prop="legalCompanyName">
          <el-input v-model="ruleForm.legalCompanyName"></el-input>
        </el-form-item>
        <el-form-item label="开户城市" prop="bankOpenCity">
          <el-input v-model="ruleForm.bankOpenCity"></el-input>
        </el-form-item>
        <el-form-item label="银行账号名称" prop="bankAccountName">
          <el-input v-model="ruleForm.bankAccountName"></el-input>
        </el-form-item>
        <el-form-item label="银行账号" prop="bankCardCode">
          <el-input v-model="ruleForm.bankCardCode"></el-input>
        </el-form-item>
        <el-form-item label="银行账号编码" prop="bankAccountCode">
          <el-input v-model="ruleForm.bankAccountCode"></el-input>
        </el-form-item>
        <el-form-item label="金融机构编码" prop="bankOrganizationCode">
          <el-input v-model="ruleForm.bankOrganizationCode"></el-input>
        </el-form-item>
        <el-form-item label="金融机构名称" prop="bankBranchName">
          <el-input v-model="ruleForm.bankBranchName"></el-input>
        </el-form-item>
        <el-form-item label="金融机构行名行号" prop="bankLineNo">
          <el-input v-model="ruleForm.bankLineNo"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addgetData">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AddOrUpdate from './packageManagementlist-add-or-upate.vue'
export default {
  data () {
    return {
      dataList: [],
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      dialogVisible: false,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      value1: '',
      isEnable: '',
      userCode: '',
      legalAccountCode: '',
      legalCompanyName: '',
      ruleForm: {
        bankAccountName: '',//银行账号名称
        bankBranchName: '',//金融机构名称
        bankCardCode: '',//银行账号
        bankLineNo: '',//金融机构行名行号
        bankOrganizationCode: '',//金融机构编码
        legalAccountCode: '',//法人公司账套编码
        legalCompanyName: '',//法人公司名称
        bankAccountCode: '',//银行账号编码
        bankOpenCity: ''//开户城市
      },
      rules: {
        bankAccountName: [
          { required: true, message: '请填写银行账号名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        bankAccountCode: [
          { required: true, message: '请填写银行账号编码', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        bankOpenCity: [
          { required: true, message: '请填写开户城市', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        bankBranchName: [
          { required: true, message: '请填写金融机构名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        bankCardCode: [
          { required: true, message: '请填写银行账号', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        bankLineNo: [
          { required: true, message: '请填写金融机构行名行号', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        bankOrganizationCode: [
          { required: true, message: '请填写金融机构编码', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        legalAccountCode: [
          { required: true, message: '请填写法人公司账套编码', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        legalCompanyName: [
          { required: true, message: '请填写选择法人公司名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ]
      },
      options: [
        {
          value: "0",
          label: "无效",
        },
        {
          value: "1",
          label: "有效",
        }
      ],
    }
  },
  components: {
    AddOrUpdate
  },
  activated () {
    this.userCode = localStorage.getItem('userCode')
    this.getDataList()
  },
  methods: {
    //查询
    demand () {
      this.pageIndex = 1
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          'cassadmin/v1/legalPersonDetail/getLegalAccountByPage'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          isShowAll: 'true',
          type: 2,
          isEnable: this.isEnable,
          legalAccountCode: this.legalAccountCode,
          legalCompanyName: this.legalCompanyName
        })
      }).then(({ data }) => {
        if (data.success == 1) {
          console.log(data)
          this.dataList = data.data.list
          this.totalPage = data.data.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    //清空
    empty () {
      this.legalAccountCode = ''
      this.legalCompanyName = ''
      this.isEnable = ''
      this.getDataList()
    },
    // 同步账套设置
    open (e) {
      var that = this
      var text = ''
      var number = ''
      if (e.isEnable == 0) {
        text = '启用'
        number = '1'
      } else {
        text = '停用'
        number = '0'
      }
      this.$confirm('是否' + text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(
              'cassadmin/v1/companyAccount/updateEnableStatus'
            ),
            method: 'post',
            data: this.$http.adornData({
              bankAccountCode: '',
              enableType: 'detail',
              isEnable: number,
              legalAccountCode: e.legalAccountCode
            })
          }).then(({ data }) => {
            if (data.success == 1) {
              this.$message({
                type: 'success',
                message: '成功!'
              })
              that.getDataList()
            } else {
              this.$message.error(data.errorMsg)
            }
            this.dataListLoading = false
          })
        })
        .catch(() => { })
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          'cassadmin/v1/legalPersonDetail/getLegalAccountByPage'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          isShowAll: 'true',
          type: 2,
          legalAccountCode: this.legalAccountCode,
          legalCompanyName: this.legalCompanyName
        })
      }).then(({ data }) => {
        if (data.success == 1) {
          console.log(data)
          this.dataList = data.data.list
          this.totalPage = data.data.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    //新增银行账号
    addgetDataList () {
      this.dialogVisible = true
    },
    addgetData () {
      this.$http({
        url: this.$http.adornUrl(
          '/cassadmin/v1/legalPersonDetail/addBankCord'
        ),
        method: 'post',
        data: this.$http.adornData({
          "bankAccountName": this.ruleForm.bankAccountName,
          "bankBranchName": this.ruleForm.bankBranchName,
          "bankCardCode": this.ruleForm.bankCardCode,
          "bankLineNo": this.ruleForm.bankLineNo,
          "bankOrganizationCode": this.ruleForm.bankOrganizationCode,
          "legalAccountCode": this.ruleForm.legalAccountCode,
          "legalCompanyName": this.ruleForm.legalCompanyName,
          "bankAccountCode": this.ruleForm.bankAccountCode,
          "bankOpenCity": this.ruleForm.bankOpenCity,
        })
      }).then(({ data }) => {
        if (data.success == 1) {
          console.log(data, '新增银行账号')
          this.dialogVisible = false
          this.getDataList()
          this.closeDialog()
        }
      })
    },
    //关闭事件
    closeDialog () {
      this.ruleForm.bankAccountName = ''
      this.ruleForm.bankBranchName = ''
      this.ruleForm.bankCardCode = ''
      this.ruleForm.bankLineNo = ''
      this.ruleForm.bankOrganizationCode = ''
      this.ruleForm.legalAccountCode = ''
      this.ruleForm.legalCompanyName = ''
      this.ruleForm.bankAccountCode = ''
      this.ruleForm.bankOpenCity = ''
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          'cassadmin/v1/legalPersonDetail/getLegalAccountByPage'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          isShowAll: 'true',
          type: 2,
          isEnable: this.isEnable,
          legalAccountCode: this.legalAccountCode,
          legalCompanyName: this.legalCompanyName
        })
      }).then(({ data }) => {
        if (data.success == 1) {
          console.log(data)
          this.dataList = data.data.list
          this.totalPage = data.data.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(
          'cassadmin/v1/legalPersonDetail/getLegalAccountByPage'
        ),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          size: this.pageSize,
          isShowAll: 'true',
          type: 2,
          isEnable: this.isEnable,
          legalAccountCode: this.legalAccountCode,
          legalCompanyName: this.legalCompanyName
        })
      }).then(({ data }) => {
        if (data.success == 1) {
          console.log(data)
          this.dataList = data.data.list
          this.totalPage = data.data.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 查看详情
    addOrUpdateHandle (legalAccountCode) {
      console.log(legalAccountCode)
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(legalAccountCode)
      })
    },
    //到家账套
    WithdrawalRecord () {
      this.$router.push({
        name: `totalFinance-packageManagement`,
      });
    },
  }
}
</script>
<style>
.el-dialog {
  margin-top: 0vh !important;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 !important;
  transform: translate(-50%, -50%);
}
.el-dialog__body {
  max-height: 400px !important;
  min-height: 100px;
  overflow-y: auto;
}
.el-dialog__footer {
  padding-top: 0px !important;
}
.el-form-item__label {
  text-align: left;
}
</style>
<style scoped>
.seacrhMoney {
  display: flex;
}
.balance-searchMoney {
  display: flex;
  align-items: center;
}
.input {
  flex: 1;
  margin-left: 5px;
}
.demo-ruleForm {
  margin-top: 0vh;
}
</style>





